<style lang="less" scoped>
main {
  max-width: 1440px;
  margin: 10px auto;

  .list {
    margin-bottom: 10px;

    .title {
      font-style: 16px;
      margin-bottom: 5px;
    }

    .content {
      font-size: 12px;

      span {
        font-size: 14px;
      }
    }

    .time {
      text-align: right;
      font-size: 12px;
    }
  }
}
</style>
<template>
  <main>
    <div style="margin:10px 0;font-size: 1.5rem;">{{ blog.search_title }}</div>
    <div class="list" v-for="item in list" :key="item.id">
      <div class="title">
        <RouterLink :to="'/detail/' + item.id">[{{ item.genre }}]{{ item.title }}</RouterLink>
      </div>
      <div class="content"><span>摘要：</span>{{ item.summary }}</div>
      <div class="time">{{ item.updated_at }}</div>
    </div>
  </main>
  <footer>
    <el-pagination layout="prev, pager, next" :total="count" :current-page="currentPage"
      @current-change="handlePageChange" background style="justify-content: center;" :hide-on-single-page="true" />
  </footer>
</template>
<script setup>
import axios from '@/api/index';
import { onMounted, ref, watch } from 'vue';
import { useBlogStore } from '@/stores/blog';
const blog = useBlogStore();
const count = ref(); // 总条目数
const list = ref([]); // 博客列表
const currentPage = ref(1); // 当前页码

// 处理页码变化
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};
watch(blog, () => {
  currentPage.value = 1;
  fetchData();
});

// 获取数据
const fetchData = () => {
  axios.get('/blog/list', {
    params: {
      page: currentPage.value,
      genre_id: blog.genre_id,
      mark_id: blog.mark_id,
      search: blog.search
    }
  }).then((res) => {
    if (res.code === 200) {
      const data = res.data;
      list.value = data.list;
      count.value = data.count;
    }
  }).catch((error) => {
    console.error('Error fetching data:', error);
  });
};

// 初始化时加载数据
onMounted(() => {
  fetchData();
});


</script>